<template>
  <div class="data-v-menu1" :style="hostSty">
    <div class="menu-list" @mouseout="onMouseOut" ref="menu-list">
      <div class="menu-item" v-for="(menuItem, index) in menuList" :key="index"
        :class="{ active: index === activeIndex }" @mouseover="onMouseOver" @click="onClick($event, menuItem, index)">
        {{ menuItem.name }}
      </div>
    </div>

    <div class="triangle" :style="sty" v-if="isShow"></div>
    <div class="circle"></div>
    <div class="circle circle-dash"></div>
  </div>
</template>

<script>
import { modifyOpacity } from "../color";
export default {
  name: "data-v-menu1",
  props: ["color", "activeColor", "menuList"],
  data() {
    return {
      activeTop: "auto",
      top: "auto",
      isShow: true,
      activeIndex: 0
    };
  },
  computed: {
    sty() {
      return {
        top: this.top + 3 + "px"
      };
    },
    hostSty() {
      return {
        "--color": this.color,
        "--color-active": this.activeColor,
        "--color-bg": modifyOpacity(this.color, 0.5)
      };
    }
  },
  methods: {
    onMouseOver(event) {
      //
      let top = event.target.offsetTop + event.target.parentNode.offsetTop;
      this.top = top;
      this.isShow = true;
    },
    onMouseOut() {
      this.top = this.activeTop;
    },
    onClick(event, item, index) {
      let top = event.target.offsetTop + event.target.parentNode.offsetTop;
      this.activeIndex = index;
      this.activeTop = top;
    }
  },

  mounted() {
    let el = this.$refs["menu-list"];
    if (el.children.length > 0) {
      let firstElement = el.children[this.activeIndex];
      let top = firstElement.offsetTop + firstElement.parentNode.offsetTop;
      this.activeTop = top;
      this.top = top;
    }
  }
};
</script>

<style lang="less">
@circle-radius: 1000px;
// @color: #0067b4;
// @color-active: #ff8a00;

.data-v-menu1 {
  width: 145px;
  height: 540px;
  // outline: 1px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;

  .menu-list {
    position: relative;
    z-index: 1;
    // outline: 1px solid #fff;

    .menu-item {
      margin: 10px 0;
      padding: 2px 15px;
      border: 1px solid var(--color);
      color: var(--color);
      border-top-left-radius: 10px;
      border-bottom-right-radius: 10px;
      font-size: 14px;
      transition: 0.5s;
      cursor: pointer;
      user-select: none;

      &.active {
        color: var(--color-active);
        border-color: var(--color-active);
      }

      &:hover {
        color: var(--color-active);
        border-color: var(--color-active);
      }
    }
  }

  .circle {
    width: @circle-radius;
    height: @circle-radius;
    border: 2px solid var(--color);
    border-radius: 50%;
    position: absolute;
    right: 10px;
    top: 50%;
    background: linear-gradient(to right, transparent 92%, var(--color-bg));
    transform: translateY(-50%);
    z-index: 0;
  }

  .circle-dash {
    border-style: dashed;
    background: none;
    right: 0;
  }

  .triangle {
    position: absolute;
    right: 10px;
    z-index: 1;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-right: 10px solid var(--color-active);
    transition: 0.25s;
  }
}
</style>
